<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
    <script src="../../js/getParameter.js"></script>

    <!-- Bootstrap -->
    <link href="../../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>

function update_play(id) {
    // alert(111)
    $.ajax({
        url:"../../repertoire/playEcho",
        type:"post",
        data:{"id":id},
        // $("#update_form").serialize()
        success:function (play) {
            // alert(data)
            // alert(222)
            // load(1,4,select_button);

                $("body").html('<div id="play_update_Modal" >\n' +
                    '    <div class="modal-dialog" role="document">\n' +
                    '        <div class="modal-content">\n' +
                    '            <div class="modal-header">\n' +
                    '                <button type="button" class="close" data-dismiss="modal" id="play_close_btn_b02" aria-label="Close"><span aria-hidden="true">&times;</span></button>\n' +
                    '                <h4 class="modal-title" >修改剧目</h4>\n' +
                    '            </div>\n' +
                    '            <div class="modal-body">\n' +
                    '                <form id="update_form" cls="form-horizontal">as\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">电影名称</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <input type="text" class="form-control" value="'+play.playName+'" id="playName_update_input" placeholder="playName" name="playName">\n' +
                    '                            <span class="help-bloc"></span>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">电影时长</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <input type="text" value="'+play.playLength+'" class="form-control" id="playLength_update_input" placeholder="playLength" name="playLength">\n' +
                    '                            <span class="help-block"></span>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">电影类型</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <input type="text" value="'+play.playType+'"  class="form-control" id="playType_update_input" placeholder="playType" name="playType">\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">电影海报</label>\n' +
                    '                        <div class="col-sm-4">\n' +
                    '                            <select class="form-control" value="'+play.playImage+'" name="playImage">\n' +
                    '                                <option value="默认" >默认图片</option>\n' +
                    '                                <option value="三傻大闹宝莱坞">三傻大闹宝莱坞</option>\n' +
                    '                                <option value="三国演义" >三国演义</option>\n' +
                    '                                <option value="举起手来" >举起手来</option>\n' +
                    '                                <option value="功夫之王" >功夫之王</option>\n' +
                    '                                <option value="喜剧之王" >喜剧之王</option>\n' +
                    '                                <option value="小萝莉的猴神大叔" >小萝莉的猴神大叔</option>\n' +
                    '                                <option value="疯狂的石头" >疯狂的石头</option>\n' +
                    '                                <option value="警察故事" >警察故事</option>\n' +
                    '                                <option value="逃学威龙" >逃学威龙</option>\n' +
                    '                                <option value="复仇者联盟" >复仇者联盟</option>\n' +
                    '                                <option value="孟买酒店" >孟买酒店</option>\n' +
                    '                                <option value="我不是药神" >我不是药神</option>\n' +
                    '                                <option value="绿皮书" >绿皮书</option>\n' +
                    '                                <option value="调音师" >调音师</option>\n' +
                    '                                <option value="头号玩家" >头号玩家</option>\n' +
                    '                                <option value="釜山行" >釜山行</option>\n' +
                    '                                <option value="寄生虫" >寄生虫</option>\n' +
                    '                            </select>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '\n' +
                    '                    <div class="form-group">\n' +
                    '                        <label class="col-sm-2 control-label">电影简介</label>\n' +
                    '                        <div class="col-sm-10">\n' +
                    '                            <textarea class="form-control" value="'+play.playDescription+'" rows="3" id="playDescription_update_input" name="playDescription"></textarea>\n' +
                    '                        </div>\n' +
                    '                    </div>\n' +
                    '            <div class="modal-footer">\n' +
                    '                <button type="button" class="btn btn-default" id="play_close_btn_b" data-dismiss="modal">关闭</button>\n' +
                    '                <button type="submit" class="btn btn-primary" id="play_update_btn">修改</button>\n' +
                    '            </div>\n' +
                    '                </form>\n' +
                    '\n' +
                    '            </div>\n' +
                    '        </div>\n' +
                    '    </div>\n' +
                    '</div>')

                $("#update_form").submit(function () {
                    $.ajax({
                        url:"../../repertoire/playUpdete?id="+id,
                        type:"post",
                        data:$("#update_form").serialize(),
                        success:function (data) {
                            location.href="http://localhost:8080/cinema/pages/manager/play.html";
                        },dataType:"json"
                    })


                })
                $("#play_close_btn_b").click(function () {
                    location.href="http://localhost:8080/cinema/pages/manager/play.html";
                })


                $("#play_close_btn_b02").click(function () {
                    location.href="http://localhost:8080/cinema/pages/manager/play.html";
                })


        },
        dataType:"json"
    })


}
    function delete_play(id) {


        if (confirm("你是不是要删除")) {
            $.ajax({
                url:"../../repertoire/deletePlay",
                type:"post",
                data:{"id":id},
                success:function (data) {
                location.href = "http://localhost:8080/cinema/pages/manager/play.html";
                }
            })
            }



    }
    function load(currentPage,rows,select_button){

                    $.ajax({
                        type: "post",
                        url: "../../repertoire/playRepertoire",
                        data:{"currentPage":currentPage,"rows":rows,"select_button":select_button},
                        success: function (data) {
                            // alert(111)
                            // alert(data)
                            var play_table='';
                            play_table+='<table id="play_table" class="table table-bordered table-striped">\n' +
                                '                    <thead >\n' +
                                '                    <tr >\n' +
                                '                        <th>电影编号</th>\n' +
                                '                        <th>电影名称</th>\n' +
                                '                        <th>电影时长(分钟)</th>\n' +
                                '                        <th>电影类型</th>\n' +
                                '                        <th>操作</th>\n' +
                                '                    </tr>\n' +
                                '                    </thead>';
                         $.each(data.list,function (ind,ele) {
                             play_table+=' <tr >\n' +
                                 '                        <th>'+ele.playId+'</th>\n' +
                                 '                        <th>'+ele.playName+'</th>\n' +
                                 '                        <th>'+ele.playLength+'(分钟)</th>\n' +
                                 '                        <th>'+ele.playType+'</th>\n' +
                                 '                        <th><button id="edit_btn" href="" onclick="update_play('+ele.playId+')"><span>编辑</span></button><button id="delete_btn" href="" onclick="javascript:delete_play('+ele.playId+')"><span>删除</span></button></th>\n' +
                                 '                    </tr>';
                         })
                            $("#play_table").html(play_table);





                            var prePage = currentPage - 1;
                            if (prePage < 1) {
                                prePage = 1
                            }
                            var afterPage = currentPage + 1;
                            if (afterPage > data.totalPage) {
                                afterPage = data.totalPage
                            }
                            var play_ul='';




                            play_ul += '<li class="threeword"><a href="javascript:load('+prePage+','+rows+','+select_button+')">上一页</a></li>';


                            var beginPage = 0;
                            var endPage = 0;
                            if (data.totalPage <= 10) {
                                beginPage = 1;
                                endPage = data.totalPage
                            } else {
                                if (currentPage - 5 <= 1) {
                                    beginPage = 1;
                                    endPage = beginPage + 9;
                                }
                                if (currentPage - 5 > 1) {
                                    beginPage = currentPage - 5;
                                    endPage = currentPage + 4;
                                    if (endPage >= data.totalPage) {
                                        endPage = data.totalPage;
                                        beginPage = endPage - 9;
                                    }
                                }
                            }
                            for (var i = beginPage; i <= endPage; i++) {
                                // rotte_pageBean_ul+='<li><a href="#">'+i+'</a></li>';
                                if (currentPage == i) {
                                    play_ul += '<li class="curPage"  onclick="load(' + i + ',' + rows + ','+select_button+')"><a href="javascript:load(' + i + ',' + rows + ','+select_button+')">' + i + '</a></li>';

                                } else {

                                    play_ul += '<li  onclick="load(' + i + ',' + rows + ','+select_button+')"><a href="javascript:load(' + i + ',' + rows + ','+select_button+')">' + i + '</a></li>';
                                }

                            }
                            play_ul += '<li class="threeword"><a href="javascript:load(' + afterPage + ',' + rows + ','+select_button+');">下一页</a></li>';
                            $("#play_ul").html(play_ul);



                        },
                        dataType: "json"


        })





    };

        function addPlay(){
            $("body").html('<div class="modal_fade" id="play_add_Modal"  >\n' +
                '    <div class="modal-dialog" role="document">\n' +
                '        <div class="modal-content">\n' +
                '            <div class="modal-header">\n' +
                '                <button id="play_close_btn02" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true " >&times;</span></button>\n' +
                '                <h4 class="modal-title" id="myModalLabel">添加剧目</h4>\n' +
                '            </div>\n' +
                '            <div class="modal-body">\n' +
                '                <form class="form-horizontal">\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">电影名称</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <input type="text" class="form-control" id="playName_add_input" placeholder="playName" name="playName">\n' +
                '                            <span class="help-bloc"></span>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">电影时长</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <input type="text" placeholder="请输入数字" class="form-control" id="playLength_add_input" placeholder="playLength" name="playLength">\n' +
                '                            <span class="help-block"></span>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">电影类型</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <input type="text" class="form-control" id="playType_add_input" placeholder="playType" name="playType">\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '\n' +
                '                        <div class="form-group">\n' +
                '                            <label class="col-sm-2 control-label">电影海报</label>\n' +
                '                            <div class="col-sm-4">\n' +
                '                                <select class="form-control" id="play_add_Image" name="playImage">\n' +
                '                                    <option value="默认" selected="selected">默认图片</option>\n' +
                '                                    <option value="三傻大闹宝莱坞">三傻大闹宝莱坞</option>\n' +
                '                                    <option value="三国演义" >三国演义</option>\n' +
                '                                    <option value="举起手来" >举起手来</option>\n' +
                '                                    <option value="功夫之王" >功夫之王</option>\n' +
                '                                    <option value="喜剧之王" >喜剧之王</option>\n' +
                '                                    <option value="小萝莉的猴神大叔" >小萝莉的猴神大叔</option>\n' +
                '                                    <option value="疯狂的石头" >疯狂的石头</option>\n' +
                '                                    <option value="警察故事" >警察故事</option>\n' +
                '                                    <option value="逃学威龙" >逃学威龙</option>\n' +
                '                                    <option value="复仇者联盟" >复仇者联盟</option>\n' +
                '                                    <option value="孟买酒店" >孟买酒店</option>\n' +
                '                                    <option value="我不是药神" >我不是药神</option>\n' +
                '                                    <option value="绿皮书" >绿皮书</option>\n' +
                '                                    <option value="调音师" >调音师</option>\n' +
                '                                    <option value="头号玩家" >头号玩家</option>\n' +
                '                                    <option value="釜山行" >釜山行</option>\n' +
                '                                    <option value="寄生虫" >寄生虫</option>\n' +
                '                                </select>\n' +
                '                            </div>\n' +
                '                        </div>\n' +
                '\n' +
                '                    <div class="form-group">\n' +
                '                        <label class="col-sm-2 control-label">电影简介</label>\n' +
                '                        <div class="col-sm-10">\n' +
                '                            <textarea class="form-control" rows="3" id="playDescription_add_input" name="playDescription"></textarea>\n' +
                '                        </div>\n' +
                '                    </div>\n' +
                '            <div class="modal-footer">\n' +
                '                <button type="button" class="btn btn-default" id="play_close_btn" data-dismiss="modal">关闭</button>\n' +
                '                <button type="submit" class="btn btn-primary" id="play_save_btn">保存</button>\n' +
                '            </div>\n' +
                '                </form>\n' +
                '            </div>\n' +

                '        </div>\n' +
                '    </div>\n' +
                '</div>\n');


            function checkPlayLength(){
                var playLength = $("input[name=playLength]").val();

                var reg =  /^([1-9]|[1-9]\d|1\d{2}|200)$/;
                var flag = reg.test(playLength);
                if(flag){
                    $("#playLength_add_input").css("border","")
                    $(".help-block").html("")

                }else {
                    $("#playLength_add_input").css("border","1px red solid")
                    $(".help-block").html("请输入0-200")


                }
                return flag;
            }

            //
            // if(checkPlayLength()==false) {
            //     // $("#play_save_btn").attr("disabled","false")
            //     $("#play_save_btn").attr("disabled","true")
            //
            // }

            $(function () {
                $(".form-horizontal").submit(function () {

                    if (checkPlayLength()) {
                        $.ajax({
                            url: "../../repertoire/addPlay",
                            typr: "post",
                            data: $(".form-horizontal").serialize(),
                            // data:$(this).serialize(),
                            success: function (data) {
                                location.href = "http://localhost:8080/cinema/pages/manager/play.html"
                            },
                            dataType: "json"
                        })

                    }
                return false;
                })
            })




                $("#playLength_add_input").blur(checkPlayLength)

            $("#play_close_btn").click(function () {
                location.href="http://localhost:8080/cinema/pages/manager/play.html";
            })
            $("#play_close_btn02").click(function () {
                location.href="http://localhost:8080/cinema/pages/manager/play.html";
            })
        }

    $(function () {
        // var select_input=null;
        // alert(111)
        $("#select_button").click(function () {
           var  select_input = $("#select_input").val();
            // alert(333)
            // alert(select_input+"haha")
            // location.href="http://localhost:8080/cinema/pages/manager/play.html?search_route="+select_input;
            load(1,4,select_input);
        })
      var select_input= getParameter("select_input")
      //   console.log(select_input)
        // alert("select_input:"+select_input)
        load(1,4,select_input);




    })



</script>
<style type="text/css">
    th{
        text-align: center;
    }
    td{
        text-align: center;
    }


    .row-margin-top {
        margin-top: 10px;
    }




</style>

</head>
<body>

<!-- 修改剧目的模态框 -->
<!-- Modal -->
<div class="modal fade" id="play_update_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" >修改剧目</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="playName_update_input" placeholder="playName" name="playName">
                            <span class="help-bloc"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影时长</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="playLength_update_input" placeholder="playLength" name="playLength">
                            <span class="help-block" id="help-block_span"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="playType_update_input" placeholder="playType" name="playType">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影海报</label>
                        <div class="col-sm-4">
                            <select class="form-control" name="playImage">
                                <option value="默认" >默认图片</option>
                                <option value="三傻大闹宝莱坞">三傻大闹宝莱坞</option>
                                <option value="三国演义" >三国演义</option>
                                <option value="举起手来" >举起手来</option>
                                <option value="功夫之王" >功夫之王</option>
                                <option value="喜剧之王" >喜剧之王</option>
                                <option value="小萝莉的猴神大叔" >小萝莉的猴神大叔</option>
                                <option value="疯狂的石头" >疯狂的石头</option>
                                <option value="警察故事" >警察故事</option>
                                <option value="逃学威龙" >逃学威龙</option>
                                <option value="复仇者联盟" >复仇者联盟</option>
                                <option value="孟买酒店" >孟买酒店</option>
                                <option value="我不是药神" >我不是药神</option>
                                <option value="绿皮书" >绿皮书</option>
                                <option value="调音师" >调音师</option>
                                <option value="头号玩家" >头号玩家</option>
                                <option value="釜山行" >釜山行</option>
                                <option value="寄生虫" >寄生虫</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影简介</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3" id="playDescription_update_input" name="playDescription"></textarea>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="play_update_btn">修改</button>
            </div>
        </div>
    </div>
</div>

<!--添加剧目的模态框-->
<!-- Modal -->
<div class="modal fade" id="play_add_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加剧目</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="playName_add_input" placeholder="playName" name="playName">
                            <span class="help-bloc"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影时长</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="playLength_add_input" placeholder="playLength" name="playLength">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影类型</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="playType_add_input" placeholder="playType" name="playType">
                        </div>
                    </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">电影海报</label>
                            <div class="col-sm-4">
                                <select class="form-control" name="playImage">
                                    <option value="默认" selected="selected">默认图片</option>
                                    <option value="三傻大闹宝莱坞">三傻大闹宝莱坞</option>
                                    <option value="三国演义" >三国演义</option>
                                    <option value="举起手来" >举起手来</option>
                                    <option value="功夫之王" >功夫之王</option>
                                    <option value="喜剧之王" >喜剧之王</option>
                                    <option value="小萝莉的猴神大叔" >小萝莉的猴神大叔</option>
                                    <option value="疯狂的石头" >疯狂的石头</option>
                                    <option value="警察故事" >警察故事</option>
                                    <option value="逃学威龙" >逃学威龙</option>
                                    <option value="复仇者联盟" >复仇者联盟</option>
                                    <option value="孟买酒店" >孟买酒店</option>
                                    <option value="我不是药神" >我不是药神</option>
                                    <option value="绿皮书" >绿皮书</option>
                                    <option value="调音师" >调音师</option>
                                    <option value="头号玩家" >头号玩家</option>
                                    <option value="釜山行" >釜山行</option>
                                    <option value="寄生虫" >寄生虫</option>
                                </select>
                            </div>
                        </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">电影简介</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3" id="playDescription_add_input" name="playDescription"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="play_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>


<!--页面主体-->
<div class="container-fluid">
    <div class="row row-margin-top">
        <div class="col-md-12">
            <div class = "row row-margin-top">
                    <div class="col-md-8">
                        <div class="col-md-4">
                            <input type="text" class="form-control" id="select_input" placeholder="请  输  入  电  影  名  称" name="playName">
                        </div>
                        <div class="col-md-1">
                            <button id="select_button" href="javascript:select_play()"  class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search" aria-hidden="true" ></span >搜索</button>
                        </div>
                    </div>
            </div>

            <div class = "row">
                <div class="col-md-3 col-md-offset-5">
                    <h1>剧目管理</h1>
                </div>
            </div>
            <div class = "row row-margin-top">
                <div class="col-md-1 col-md-offset-10">
                    <button id="play_add_modal_btn" class="btn btn-primary btn-sm"  onclick="addPlay()"><span class="glyphicon glyphicon-film" aria-hidden="true" ></span>&nbsp;新增</button>
                </div>
            </div>

            <div class="row row-margin-top">
                <table id="play_table" class="table table-bordered table-striped">
                    <thead >
                    <tr >
                        <th>电影编号</th>
                        <th>电影名称</th>
                        <th>电影时长(分钟)</th>
                        <th>电影类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

                        <ul class="pagination" id="play_ul">



                        </ul>


            </div>

        </div>
    </div>

    <div class="row row-margin-top">
        <!-- 分页条信息 -->
        <div id="page_nav" class="col-md-4 col-md-offset-4">
        </div>
    </div>
    
    <div class="row row-margin-top">
        <!--分页信息  -->
        <div id="page_info" class="col-md-4 col-md-offset-4">
        </div>
    </div>

</div>
</body>
</html>